<template>
  <div class="header">
    <div class="logo">管理系统</div>
    <!-- 折叠按钮 -->
    <el-tooltip class="item" effect="dark" :content="!collapse?'收起菜单':'打开菜单'" placement="bottom">
      <div class="collapse-btn" @click="collapseChage">
        <i v-if="!collapse" class="el-icon-s-fold"></i>
        <i v-else class="el-icon-s-unfold"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="新建" placement="bottom">
      <div class="collapse-btn" @click="dialog=true">
        <i class="el-icon-folder-add"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="打开" placement="bottom">
      <div class="collapse-btn" @click="dialog=true">
        <i class="el-icon-folder-opened"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
      <div class="collapse-btn">
        <i class="el-icon-folder-checked"></i>
      </div>
    </el-tooltip>
    <el-dialog title="新建文件" :visible.sync="dialog" width="60%" :close-on-click-modal="false">
      <div v-if="active == 1">
        <div class="new-group">
          <div class="new-left">
            <div class="new-title">请选择一个文件类型</div>
            <div class="new-box scrollbar">
              <div class="new-list-text new-list-text-active">基础文件</div>
              <div class="new-list-text">实验文件</div>
            </div>
          </div>
          <div class="new-center">
            <div class="new-title">请选择一个基础文件</div>
            <div class="new-box scrollbar">
              <div class="new-list-text new-list-text-active flex flex-align">
                <span class="el-icon-folder" style="margin-right:6px;"></span>
                <span>基础文件</span>
              </div>
            </div>
          </div>
          <div class="new-right">
            <div class="new-title">详细信息</div>
            <div class="new-box scrollbar">
              <div class="new-list-text">
                <span>项目名称：</span>
                <span class="new-list-text-span1">SAA</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="active == 2">
        <el-form ref="form" :model="form" label-width="160px">
          <el-form-item label="新建实验文件名称">
            <el-input placeholder="" v-model="form.region"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button @click="active = 1" v-if="active == 2">上一步</el-button>
        <el-button type="primary" @click="active = 2">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新建文件" :visible.sync="dialog1" width="60%" :close-on-click-modal="false">
      <div v-if="active == 1">
        <div class="new-group">
          <div class="new-left">
            <div class="new-title">请选择一个文件类型</div>
            <div class="new-box scrollbar">
              <div class="new-list-text new-list-text-active">基础文件</div>
              <div class="new-list-text">实验文件</div>
            </div>
          </div>
          <div class="new-center">
            <div class="new-title">请选择一个基础文件</div>
            <div class="new-boxs scrollbar">
              <div class="new-list-text new-list-text-active flex flex-align">
                <span class="el-icon-folder" style="margin-right:6px;"></span>
                <span>SAAA</span>
              </div>
            </div>
            <div class="new-title">请选择一个曲线文件</div>
            <div class="new-boxs scrollbar">
              <div class="new-list-text new-list-text-active flex flex-align">
                <span class="el-icon-folder" style="margin-right:6px;"></span>
                <span>SAAA</span>
              </div>
            </div>
          </div>
          <div class="new-right">
            <div class="new-title">详细信息</div>
            <div class="new-box scrollbar">
              <div class="new-list-text">
                <span>项目名称：</span>
                <span class="new-list-text-span1">SAA</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="active == 2">
        <div style="width:40%;">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="项目名称">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="项目代码">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="生产年">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="生产月">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="批次">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="批次前缀">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="有效月数">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="使用区域">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="width:60%;">
          <el-form ref="form" inline="true" :model="form" label-width="160px">
            <el-form-item label="子项">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="系数小数位数">
              <el-input placeholder="" v-model="form.region"></el-input>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="30vh">
            <el-table-column label="样本类型" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="系数值" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
            <el-table-column label="曲线序号" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog1 = false">取 消</el-button>
        <el-button @click="active1 = 1" v-if="active1 == 2">上一步</el-button>
        <el-button type="primary" @click="active1 = 2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template> 
<script>
import bus from "@/utils/bus";
export default {
  data() {
    return {
      active: 1,
      dialog: false,
      active1: 1,
      dialog1: false,
      collapse: false,
      fullscreen: false,
      name: '管理员',
      message: 0,
      activeIndex: '0',
      authTreeList: [],
      tableData: [],
      max_number: 0,
      form: {
        region: ''
      }
    };
  },
  computed: {
    username() {
      let userInfo = localStorage.getItem('userInfo');
      return userInfo ? JSON.parse(userInfo) : { realname: this.name };
    }
  },
  created() { },
  methods: {
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == 'loginout') {
        const loading = this.$loading({ text: '退出中...' });
        this.$http.post(this.$API.LOGOUT, {})
          .then((res) => {
            loading.close();
            console.log('登录信息', res)
            if (res.code == 1) {
              window.sessionStorage.removeItem('userName')
              window.sessionStorage.removeItem('jqzxUserId')
              bus.$emit("global-close-open", false);
              this.$router.push('/login');
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            loading.close();
            this.$message.error('网络错误');
          })
      } else if (command == 'uploadUser') {//修改密码
        this.$router.push('/setPassword');
      }
    },
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.$emit('collapse', this.collapse);
    },
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  }
};
</script>
<style scoped>
.new-group {
  display: flex;
}
.new-left,
.new-center,
.new-right {
  width: 32%;
}
.new-center,
.new-right {
  margin-left: 1.3%;
}
.new-title {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.new-box {
  height: 400px;
  border: 1px solid #eee;
  background: #fafafa;
}
.new-boxs {
  height: 200px;
  border: 1px solid #eee;
  background: #fafafa;
}
.el-menu,
.el-menu--horizontal {
  border: 0 !important;
  margin-top: 10px !important;
}
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: #fff;
}
.collapse-btn {
  float: left;
  padding: 0 10px;
  cursor: pointer;
  line-height: 50px;
}
.header .logo {
  padding: 0 30px;
  float: left;
  line-height: 50px;
}
.header-right {
  padding-right: 50px;
  display: flex;
}
.header-right-tab {
  flex-flow: 1;
}
.header-user-con {
  display: flex;
  height: 50px;
  align-items: center;
}
.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}
.btn-bell .el-icon-bell {
  color: #fff;
}
.user-name {
  margin-left: 10px;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}
.new-list-text {
  font-size: 14px;
  padding: 6px;
  color: #333;
}
.new-list-text-span1 {
  color: #888;
}

.new-list-text-active {
  color: #409eff;
}
</style>
